<script setup>
import navigation from '@/router/navigation';

const tabs = [];
navigation.forEach((item) => {
  const { path, meta = {} } = item;
  const { tabName = '', icon = 'home-o' } = meta;
  tabs.push({
    to: path,
    name: tabName,
    icon
  });
});
</script>

<template>
  <van-tabbar route class="bottom-navigation">
    <van-tabbar-item
      v-for="(item, index) in tabs"
      :key="index"
      replace
      :to="item.to"
      :icon="item.icon"
    >
      {{ item.name }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<style lang="stylus" scoped>
.bottom-navigation
  left auto
  width 100%
  max-width var(--max-width)

  &::after
    border-bottom-width 0
</style>
